<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单控件细节</title>
  </head>
  <body>
    <form action="">
      <!-- 
        控件中的常用属性
        name        控件名称
        value       控件的值

        placeholder 文本框说明文字
        maxlength   文本框最大输入字符数

        checked     单选/多选按钮默认选中
        selected    下拉菜单默认选中
        
        required    必须填写
        disabled    禁用控件
        readonly    只读
       -->
      <input type="text" placeholder="username" maxlength="6" />

      <!-- 
          如何实现点击控件和点击提示文字具有相同的激活效果?
          1.在控件中提供id属性并且命名
          2.使用label标签包裹说明文字
          3.给label标签提供for属性,属性值与对应控件的id保持一致
      -->
      <input type="radio" name="gender" value="0" id="male" /><label for="male">男</label>
      <input type="radio" name="gender" value="1" checked id="female" /><label for="female">女</label>

      <input type="checkbox" name="hobby" value="0" checked />游泳
      <input type="checkbox" name="hobby" value="1" checked />跑步 <input type="checkbox" name="hobby" value="2" />爬山
      <input type="checkbox" name="hobby" value="3" />滑雪

      <select name="province">
        <option>--请您选择省份--</option>
        <option value="0" selected>江苏省</option>
        <option value="1">河南省</option>
        <option value="2">广东省</option>
      </select>

      <input type="submit" value="提交" />
    </form>
  </body>
</html>
